<template>
	<view id="">
		<tui-tips ref="toast" v-if="index==0"></tui-tips>
		<tui-drawer mode="right" :visible="isopen">
			<headNav @close="closeOpen" @showTips="showTips"></headNav>
		</tui-drawer>
		<view class="page affiliate_dashboard_page affiliate_page">
			<view class="page_header">

				<view class="header_center">
					<topWallet :connect="hasToken" @onOpen="openModel"></topWallet>

					<view class="golden-title"><text>商城购物</text></view>
				</view><button class="menu_btn" @click="navs('showLeft')">
					<image src="/static/images/common/menu.svg" mode="widthFix">
				</button>
			</view>

			<navigator url="/share_links" @click="showDialog">
				<view class="add_link_btn">{{$t('Generate-Link')}}</view>
			</navigator>
			<view class="bottom box-container">
				<view class="tui-address">
					<block v-for="(item,index) in addressList" :key="index">
						<tui-list-cell padding="0" class="tui-boxs">
							<view class="tui-address-flex">
								<radio-group class="radio-group" name="addressid" style="transform:scale(0.8)"
								    	@change="radioChange" v-if="istrues">
									<label class="tui-radio">
										<radio :value="item.id" color="#f28c28" :checked="index === current" />
									</label>
								</radio-group>
								<view class="tui-address-left">
									<view class="tui-address-main" @click="editAddr(item.id)">
										<view class="tui-address-name tui-ellipsis">{{item.recipient}}</view>
										<view class="tui-address-tel">{{item.mobile}}</view>
									</view>
									<view class="tui-address-detail">
										<view class="tui-address-label" v-if="item.is_default===1">默认</view>
	
										<text>{{item.address}}</text>
									</view>
								</view>
								<view class="tui-address-imgbox" @click="editAddr(item.id)">
									<image class="tui-address-img" src="/static/images/mall/my/icon_addr_edit.png" />
								</view>
							</view>
						</tui-list-cell>
					</block>
				</view>
				<!-- <view class="tui-operation ">
				
					<view class="goods-button" @click="submit" :loading="isloading" :disabled="isdisabled">立即购买
					</view>
				
				</view> -->
				<view class="tui-operation">
					<view class="goods-button" @click="addAddr" >+ 新增收货地址
					</view>
			
				</view>

			</view>
			<view class="popups_container" v-if="showLink">
				<view class="popup">
					<view class="close" @click="closeLink"></view>
					<!-- <view class="content"> -->
					<view class="new_campaign_form">
						<image src="/static/images/entryscreen/genAffLink.png" class="new_campaign_form_header">
							<view class="input_label">我的代理会员链接昵称</view>
							<view class="input_box"><input class="name_input" maxlength="15" placeholder="命名您的代理会员链接"
									value=""></view>
							<view class="input_instruct">6 ~ 15个字符，只允许使用英文字母和数字。</view>
							<view class="gold_btn">创建链接</view>
					</view>
					<!-- </view> -->
				</view>
			</view>
		</view>
		<!-- wallet_pop-->
		<walletPop :walletOpen="open_wallet" :walletModelOpen="open_wallet" @closeWallet="closePop"
			@showTips="showTips"></walletPop>
		<tui-tips ref="toast" position="center"></tui-tips>
		<view v-if="showTabbar">
			<tui-tabbar :current="current" @click="tabbarSwitch" backdropFilter :backgroundColor="backgroundColor"
				:tabBar="tabBar" color="#777" selectedColor="#f4d56f"></tui-tabbar>
		</view>

	</view>
</template>

<script>
	import headNav from "@/components/nav/head_nav.vue"
	import topWallet from "@/components/nav/top_wallet.vue"
	import walletPop from "@/components/nav/wallet_pop.vue"
	export default {
		components: {
			headNav,
			topWallet,
			walletPop
		},
		data() {
			return {
				addressList: [],
				showLink: false,
				hasToken: false,
				open_wallet: false,
				teamData: '',
				current:0,
				isList: '',
				showTabbar: true,
				backgroundColor: '#191c1d',
				productInfo: '',
				banner: '',
				popupShow: false,
				isdisabled: false,
				isloading: false,
				goods_id: '',
				tabBar: [{
						pagePath: '/pages/dashboard/faq',
						text: this.$t('question'),
						iconPath: '/static/images/common/eb2ad3e9f15cd5c45523.svg',
						selectedIconPath: '/static/images/common/faq.png',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_links',
						text: this.$t('Promotion-link'),
						iconPath: '/static/images/common/1c328bea0664621ae940.svg',
						selectedIconPath: '/static/images/common/2ddef14ffefdf0893c68.svg',

						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_report',
						text: this.$t('Income-statement'),
						iconPath: '/static/images/common/27ef8eecf3261b27000a.svg',
						selectedIconPath: '/static/images/common/e71ec10e6a3c2f14b631.svg',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/dashboard',
						text: this.$t('control-panel'),
						iconPath: '/static/images/common/e5eb47a4e075e5a7a1e6.svg',
						selectedIconPath: '/static/images/common/0713c468a0e288a09478.svg',
						verify: true
					}
				],
				noClick: false,
				spec_list: '',
				subIndex: [],
				subIndexs: 3,
				


			};
		},
		onLoad: function(options) {
			
			
		},
		onShow() {
			if (this.tui.isLogin()) {
				this.hasToken = true;
				this.init();
			}
		},
		methods: {
			init() {

				this.loadding=true;
	
				let datas={
					
				};
				let address=this.tui.request('api/user/address','post',datas,1000,1,'','address');
				Promise.resolve(address).then((value)=>{
				   if(value.code==200){
					   this.addressList = value.data;
				   	for (let i = 0; i < this.addressList.length; i++) {
				   		for (let i = 0; i < this.addressList.length; i++) {
				   			this.addressList[i].id=String(this.addressList[i].id)
				   			if(this.tui.getAddressId()==this.addressList[i].id){
				   				
				   					this.current=i;
				   				
				   			}
				   		}
				   	}
							
				   }else{
				   	this.tui.toast(value.message);
				   }
				   this.loadding=false;
				})
			},
			tabbarSwitch(e) {

				this.current = e.index;

			},
			editAddr(index) {
				uni.navigateTo({
					url: "/pages/shop/editAddress?adressid="+index
				})
			},
			addAddr() {
				uni.navigateTo({
					url: "/pages/shop/editAddress"
				})
			},
			
			navs() {
				this.isopen = true
				this.showTabbar = false
			},
			openModel() {
				this.open_wallet = true;
			},
			closeOpen() {
				this.isopen = false
				this.showTabbar = true
			},
			showPopup: function() {
				this.popupShow = true;
			},
			hidePopup: function() {
				this.popupShow = false;
			},
			goBack() {
				uni.navigateBack()
			},
			connectPurse() {
				this.showPurse = true
			},
			closePurse() {
				this.showPurse = false
			},
			showDialog() {
				this.showLink = true
			},
			closeLink() {
				this.showLink = false
			},
			closePop() {
				this.open_wallet = false;
			},
			showTips: function(msg, type) {

				let options = {
					msg: msg,
					duration: 2000,
					type: type
				};
				this.$refs.toast.showTips(options);
			},

		}
	}
</script>

<style lang="scss">
	@import '../../static/css/defalut.css';
	// page {
	// 	// background-color: #0c0d13;
	// 	color: #fff;
	// 	font-family: "Barlow Semi Condensed", sans-serif;
	// 	// font-size: 1.3vw;
	// 	margin: 0;
	// 	padding: 0;
	// 	overflow: hidden;
	// }
    .tui-address {
    	// width: 100%;
		
    	padding-top: 20rpx;
		margin:30rpx;
		border-radius: 20rpx;
    	// padding-bottom: 160rpx;
    }
	.tui-boxs{
		// margin:20rpx;
		font-size: 26rpx !important;
		width:auto !important;
		background: #212a36 !important;
		color:#fff !important;
		font-size: 24rpx !important;
		margin-bottom:60rpx;
	}
	.tui-list-cell::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 126rpx;
	}
	.tui-list-cell::after{
		border:none !important;
	}
    .tui-address-flex {
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    }
    .tui-operation {
    
    	margin: 20rpx;
    
    	background-color: #f4d56f;
    	border-radius: 20rpx;
    	margin-top: 20rpx;
    
    
    	align-items: center;
    	justify-content: space-between;
    
    
    }
    .radio-group {
    
    	/* margin-right: 20rpx; */
    	margin-left: 20rpx;
    }
    .tui-address-main {
    	width: 600rpx;
    	height: 70rpx;
    	display: flex;
    	font-size: 30rpx;
    	line-height: 86rpx;
    	padding-left: 30rpx;
    }
    
    .tui-address-name {
    	width: 120rpx;
		font-size: 28rpx;
    	height: 60rpx;
    }
    
    .tui-address-tel {
    	margin-left: 10rpx;
    }
    
    .tui-address-detail {
    	font-size: 24rpx;
    	word-break: break-all;
    	padding-bottom: 25rpx;
    	padding-left: 25rpx;
    	padding-right: 120rpx;
    }
    
    .tui-address-label {
    	padding: 5rpx 8rpx;
    	flex-shrink: 0;
    	background: #e4bd1e;
    	border-radius: 6rpx;
    	color: #fff;
    	display: inline-flex;
    	align-items: center;
    	justify-content: center;
    	font-size: 25rpx;
    	line-height: 25rpx;
    	transform: scale(0.8);
    	transform-origin: center center;
    	margin-right: 6rpx;
    }
    
    .tui-address-imgbox {
    	width: 80rpx;
    	height: 100rpx;
    	position: absolute;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	right: 10rpx;
    }
    
    .tui-address-img {
    	width: 36rpx;
    	height: 36rpx;
    }
    
    .tui-address-new {
    	width: 100%;
    	position: fixed;
    	left: 0;
    	bottom: 0;
    	z-index: 999;
    	padding: 20rpx 25rpx 30rpx;
    	box-sizing: border-box;
    	background: #fafafa;
    }
    
    .tui-safe-area {
    	padding-bottom: env(safe-area-inset-bottom);
    }
	.container {
		padding-bottom: 110rpx;
	}

	.top-none {
		padding-top: 0px !important;
	}

	.view-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 995;
	}

	.pl24 {
		padding-left: 12px;
	}

	.h32 {
		height: 16px;
	}

	.close {
		background: rgba(0, 0, 0, 0) url(../../static/images/common/close.svg) center no-repeat;
		width: 40rpx;
		height: 40rpx;
	}

	.w32 {
		width: 16px;
	}

	.point-price {
		font-size: 34rpx;
	}

	.yui-point-price {
		font-size: 30rpx;
		color: #f5b82b
	}

	.tui-popup-box-center-small {
		font-size: 24rpx;
		color: #f79229
	}

	.yui-attr-box {
		background-color: rgb(253, 235, 224);
		margin: 0rpx 28rpx;
		border-radius: 20rpx;
	}

	.tui-popup-box-center {
		text-align: center;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		font-size: 30rpx !important;
	}

	.yui-model-pick-list {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		color: #333;
	}

	.view {
		width: 100%;
		font-size: 18px;
		line-height: 18px;
		font-weight: 500;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.yui-model-spec-list {
		margin-left: 30rpx;
		margin-bottom: 30rpx;
	}

	.sele-list-block {
		display: inline-block;
		margin-bottom: 16rpx;
	}

	.concne-one-texts {
		margin-top: 32rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		margin-bottom: 20rpx;
		line-height: 32rpx;
		color: #1f1f1f;
	}

	.concne-one-span {

		background: rgba(169, 169, 169, 0.24);
		border-radius: 16rpx;
		padding: 6rpx 20rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 32rpx;
		color: #333333;
		margin-right: 20rpx;
	}

	.concne-one-span2 {

		background: rgba(253, 168, 174, 0.2);
		border-radius: 16rpx;
		padding: 6rpx 20rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 32rpx;
		color: #f73333;
		margin-right: 20rpx;
	}

	.price-title {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.view-icon {
		position: fixed;
		top: 0;
		left: 10px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 32px;
		transform: translateZ(0);
		z-index: 9999;
	}

	.dh-icon {
		width: 74%;
		align-items: center;
		margin-top: 14%;
		margin-left: 14%;
		height: 74%;
	}

	.view-icon .tui-badge {
		background: #e41f19 !important;
		position: absolute;
		right: -4px;
	}

	.pro-nt {
		background: rgba(0, 0, 0, 0.2);
		width: 76rpx;
		height: 76rpx;
		border-radius: 10rpx;
		margin-left: -12rpx;
		margin-right: 20rpx;
	}

	.tui-icon-ml {
		margin-left: 20rpx;
	}

	.tui-icon-box {
		position: relative;
		height: 20px !important;
		width: 20px !important;
		padding: 6px !important;

		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-banner-swiper {
		margin: 20rpx;
		margin-bottom: 0rpx;
		position: relative;
	}

	.price-box {
		background: linear-gradient(to left, #ff3b00, #ff0018);
		height: 112rpx;
		line-height: 34rpx !important;
	}

	.pro-prices {
		display: flex;
	}

	.pro-price {
		color: #fff
	}

	.normal-price {
		font-size: 46rpx;
	}

	.normal-prices {
		font-size: 30rpx;
	}

	.pro-price-nm {
		font-size: 32rpx;
		font-weight: bold;
	}

	.coupon_voucher {
		width: 100%;
		display: flex;
		color: #c88717;
		/* background:linear-gradient(to left, #f5f4f0, #fffffb); */
		background: #f3a229;
		padding: 6rpx 30rpx;
		border-top: 6px solid;
		box-shadow: 0 0 6px 0 rgba(0, 0, 0, .1);
		border-radius: 6px;
	}

	.tui-coupon-item-right {
		flex: 1;
		height: 150rpx;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 24rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.font12 {
		font-size: 26rpx;
	}

	.tui-coupon-item-left {
		width: 358rpx;
		/* 		height: 110rpx; */
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		/* justify-content: center; */
		/* 	flex-direction: column; */
		flex-shrink: 0;
	}

	.tui-coupon-intro {
		margin-top: 4rpx;
		padding: 4px 5px;
		font-size: 24rpx;
		color: #ffffff
	}

	.tui-coupon-price-box {
		display: flex;
		color: #ffffff;
		align-items: flex-end;
	}

	.tui-coupon-price-sign {
		font-size: 30rpx;
	}

	.tui-coupon-price {
		font-size: 66rpx;
		line-height: 68rpx;
		font-weight: bold;
	}

	.tui-price-small {
		font-size: 58rpx !important;
		line-height: 56rpx !important;
	}

	.line-through {
		font-size: 26rpx;
		line-height: 1rpx;
		text-decoration: line-through;
		color: #fff;
		opacity: .9;
		font-weight: normal;
	}

	.tui-banner-tag {
		position: absolute;
		color: #fff;
		bottom: 30rpx;
		right: 0;
	}

	.tui-slide-image {
		width: 100%;
		display: block;
	}

	/*顶部菜单*/

	.tui-menu-box {
		box-sizing: border-box;
	}

	.tui-menu-header {
		font-size: 34rpx;
		color: #fff;
		height: 32px;
		display: flex;
		align-items: center;
	}

	.tui-btn-coupon {
		margin: 20rpx 40rpx;
	}

	.coupon-title {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.tui-coupon-radio {
		transform: scale(0.7);
		transform-origin: 100% center;
	}

	.tui-coupon-content {
		width: 82%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.tui-coupon-title-box {
		display: flex;
		align-items: center;
	}

	.tui-coupon-btn {
		padding: 12rpx 18rpx;
		background: #b15a11;
		color: #fff;
		border-radius: 24rpx;
		font-size: 25rpx;
		/* 	line-height: 25rpx; */
		display: flex;
		align-items: center;
		justify-content: center;
		transform: scale(0.9);
		transform-origin: 0 center;
		flex-shrink: 0;
	}

	.tui-menu-itembox {
		color: #fff;
		padding: 40rpx 10rpx 0 10rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		font-size: 26rpx;
	}

	.tui-menu-item {
		width: 22%;
		height: 160rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		/* flex-direction: column; */
		justify-content: center;
		background: rgba(0, 0, 0, 0.4);
		margin-right: 4%;
		margin-bottom: 4%;
	}

	.tui-menu-item:nth-of-type(4n) {
		margin-right: 0;
	}

	.item-left-m:nth-child(2n) {
		margin-left: 20rpx;
		border-left: 1px dashed #f1f1f1;
		padding-left: 20rpx;
	}

	.tui-badge-box {
		position: relative;
	}

	.tui-badge-box .tui-badge-class {
		position: absolute;
		top: -8px;
		right: -8px;
	}

	.tui-msg-badge {
		top: -10px;
	}

	.tui-icon-up_box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-menu-text {
		padding-top: 12rpx;
	}

	.tui-opcity .tui-menu-text,
	.tui-opcity .tui-badge-box {
		opacity: 0.5;
		transition: opacity 0.2s ease-in-out;
	}

	/*顶部菜单*/

	/*内容 部分*/

	.tui-padding {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tui-ml-auto {
		margin-left: auto;
	}

	/* #ifdef H5 */
	.tui-ptop {
		padding-top: 44px;
	}

	/* #endif */

	.tui-size {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-gray {
		color: #999;
	}

	.tui-icon-red {
		color: #ff201f;
	}

	.tui-border-radius {
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		overflow: hidden;
	}

	.tui-radius-all {
		border-radius: 24rpx;
		overflow: hidden;
	}

	.tui-mtop {
		margin-top: 26rpx;
	}

	.tui-pro-detail {
		box-sizing: border-box;
		color: #333;
		margin: 20rpx;
		margin-top: 0rpx;
	}

	.tui-product-title {
		background: #212a36;
		color: #fff;
		padding: 30rpx 0;
	}

	.tui-pro-pricebox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #f4d56f;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 44rpx;
	}

	.tui-pro-price {
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.tui-coin {
		margin-top: 10rpx;
		margin-left: 10rpx;
	}

	.tui-price {
		font-size: 58rpx;
	}

	.tui-original-price {
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-line-through {
		text-decoration: line-through;
	}

	.tui-collection {
		color: #333;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		height: 44rpx;
	}

	.tui-scale-collection {
		transform: scale(0.7);
		transform-origin: center 90%;
		line-height: 24rpx;
		font-weight: normal;
		margin-top: 4rpx;
	}

	.tui-pro-titbox {
		font-size: 32rpx;
		font-weight: 500;
		position: relative;
		padding: 0 150rpx 0 30rpx;
		box-sizing: border-box;
	}

	.tui-pro-title {
		padding-top: 20rpx;
	}

	.tui-share-btn {
		display: block;
		background: transparent;
		margin: 0;
		padding: 0;
		border-radius: 0;
		border: 0;
	}

	.tui-share-btn::after {
		border: 0;
	}

	.tui-share-box {
		display: flex;
		align-items: center;
	}

	.tui-share-position {
		position: absolute;
		right: 0;
		top: 30rpx;
	}

	.tui-share-text {
		padding-left: 8rpx;
	}

	.tui-sub-title {
		padding: 20rpx 0;
		line-height: 32rpx;
	}

	.tui-sale-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 30rpx;
	}

	.tui-discount-box {
		background: #fff;
	}

	.tui-list-cell {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 36rpx 30rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.tui-right {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.tui-top40 {
		top: 40rpx !important;
	}

	.tui-bold {
		font-weight: bold;
	}

	.bottom {
		margin-bottom: 100rpx;
	}



	.tui-last::after {
		border-bottom: 0 !important;
	}

	.tui-flex-center {
		display: flex;
		align-items: center;
	}


	.tui-cell-title {
		width: 66rpx;
		padding-right: 30rpx;
		flex-shrink: 0;
	}

	.goods-button {
		width: 100%;
		line-height: 80rpx;
		;

		border-radius: .4em;
		background-color: #f4d56f;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;

	}

	.tui-promotion-box {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		width: 80%;
	}

	.tui-promotion-box text {
		width: 70%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-basic-info {
		background: #fff;
	}

	.tui-addr-box {
		width: 76%;
	}

	.tui-addr-item {
		padding: 10rpx;
		line-height: 34rpx;
	}

	.tui-guarantee {
		background: #fdfdfd;
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 30rpx 30rpx 30rpx;
		font-size: 24rpx;
	}

	.tui-guarantee-item {
		color: #999;
		padding-right: 30rpx;
		padding-top: 10rpx;
	}

	.tui-pl {
		padding-left: 4rpx;
	}

	.tui-cmt-box {
		background: #fff;
	}

	.tui-between {
		justify-content: space-between !important;
	}

	.tui-cmt-all {
		color: #ff201f;
		padding-right: 8rpx;
	}

	.tui-cmt-content {
		font-size: 26rpx;
	}

	.tui-cmt-user {
		display: flex;
		align-items: center;
	}

	.tui-acatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		display: block;
		margin-right: 16rpx;
	}

	.tui-cmt {
		padding: 14rpx 0;
	}

	.tui-attr {
		font-size: 24rpx;
		color: #999;
		padding: 6rpx 0;
	}

	.tui-cmt-btn {
		padding: 50rpx 0 30rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-nomore-box {
		padding-top: 10rpx;
	}

	.tui-product-img {
		margin-top: 40rpx;
		display: flex;
		padding: 20rpx;
		font-size: 24rpx;
		min-height: 500rpx;
		background: #212a36;
		color: #fff;
		flex-direction: column;
		transform: translateZ(0);
	}

	.tui-product-img image {
		width: 100%;
		display: block;
	}

	/*底部操作栏*/

	.tui-col-7 {
		width: 58.33333333%;
	}

	.tui-col-12 {
		width: 100%;
	}

	.tui-col-5 {
		width: 41.66666667%;
	}

	.tui-operation {
		position:absolute;
		bottom:160rpx;
		
		background-color: #f4d56f;
		border-radius: 20rpx;
	
width:94%;
margin-right: 20rpx;
        margin-left: 20rpx;
		align-items: center;
		justify-content: space-between;


	}
	.goods-button{
		width:100%;
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}



	.tui-scale-small {
		transform: scale(0.9);
		transform-origin: center center;
	}

	.tui-operation-right {
		height: 80rpx;
		padding-top: 0;
	}

	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-flex-1 {
		flex: 1;
		padding: 16rpx;
	}

	/*底部操作栏*/

	/*底部选择弹层*/

	.tui-popup-class {
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-popup-box {
		background: #212a36;
		position: relative;
		padding: 30rpx 0 100rpx 0;
	}

	.tui-popup-btn {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	/* .tui-popup-btn .tui-btn-class {
    	width: 90% !important;
    	display: block !important;
    	font-size: 28rpx !important;
    } */

	/* .tui-icon-close {
    	position: absolute;
    	top: 30rpx;
    	right: 30rpx;
    } */

	.tui-product-box {
		display: flex;
		align-items: flex-end;
		font-size: 24rpx;
		padding-bottom: 30rpx;
	}

	.tui-popup-img {
		height: 200rpx;
		width: 200rpx;
		border-radius: 24rpx;
		display: block;
	}

	.tui-popup-price {
		padding-left: 20rpx;
		padding-bottom: 8rpx;
	}

	.tui-amount {
		color: #f4d56f;
		font-size: 36rpx;
	}

	.tui-number {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 12rpx;
		color: #999;
	}

	.tui-popup-scroll {

		font-size: 26rpx;
	}

	.tui-scrollview-box {
		padding: 0 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-attr-title {
		padding: 10rpx 0;
		color: #333;
	}

	.tui-attr-box {
		font-size: 0;
		padding: 20rpx 0;
	}

	.tui-attr-item {
		max-width: 100%;
		min-width: 200rpx;
		height: 64rpx;
		display: -webkit-inline-flex;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #f7f7f7;
		padding: 0 26rpx;
		box-sizing: border-box;
		border-radius: 32rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
	}

	.tui-attr-active {
		background: #fcedea !important;
		color: #e41f19;
		font-weight: bold;
		position: relative;
	}

	.tui-attr-active::after {
		content: '';
		position: absolute;
		border: 1rpx solid #e41f19;
		width: 100%;
		height: 100%;
		border-radius: 40rpx;
		left: 0;
		top: 0;
	}

	.tui-number-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0 30rpx 0;

		box-sizing: border-box;
	}

	.bottom {

		display: flex;
		flex: 1;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		background-color: #0c0d13;
	}

	.golden-title {

		color: #f4d56f;
		font-family: Barlow Semi Condensed;
		font-weight: 500;
		line-height: 56rpx;
		text-shadow: 0 4rpx 8rpx rgba(3, 3, 3, .5);
		width: 750rpx;
		text-align: center;
		font-style: italic;

	}

	.golden-title text {
		justify-content: center;
		margin-top: 2rpx;
		font-size: 48rpx
	}

	/* 商品列表*/

	.tui-product-list {
		margin: 20rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		box-sizing: border-box;
		/* padding: 10rpx 0rpx; */
	}


	.tui-product-container {
		width: 49%;
		/* 	display: flex;
    	justify-content: space-between;
    	flex-wrap: wrap;
    	flex: 1; */
		margin-right: 2%;
	}

	.yui-pricebox {
		font-size: 26rpx;
		margin-left: 4rpx;
		margin-top: 4rpx;
	}

	.tui-product-container:nth-child(2n) {
		margin-right: 0;
	}


	.tui-pro-item {
		width: 100%;
		margin-bottom: 10rpx;
		background: #212a36;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
		transition: all 0.15s ease-in-out;
	}

	.tui-flex-list {
		display: flex;
		margin-bottom: 1rpx !important;
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-proimg-list {
		width: 260rpx;
		height: 260rpx !important;
		flex-shrink: 0;
		border-radius: 12rpx;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #777777;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}



	.tui-sale-price {
		display: flex;
		font-size: 30rpx;
		font-weight: 500;
		color: #f4d56f;
	}

	.tui-sale-prices {
		font-size: 28rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}

	.affiliate_page .top_link.right .link_btn_img_box {
		width: 70rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		border: solid 2rpx rgba(244, 213, 111, .7);
		background-color: rgba(37, 31, 20, .5);
	}

	.affiliate_page .top_link.right .link_btn_img_box_active {
		width: 68rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		border: solid 2rpx rgba(255, 255, 255, .7);
		background-color: #251f14;
	}

	.affiliate_page .top_link.right .link_btn_img_box_active image {
		width: 70%;
		height: 100%;
	}

	.affiliate_page .top_link.right .link_btn_img_box image {
		width: 70%;
		height: 100%;
	}

	image {
		overflow-clip-margin: content-box;
		overflow: clip;
	}

	.buy {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: row;

	}

	.button_buy {
		background-color: #f4d56f;
		width: 200rpx;
	}
</style>